<template>
	<div>
		<!--开个价弹出框-->
		<van-popup
		  :close-on-click-overlay="false"	
		  @click-overlay="cancle"	
		  v-model="showMoneyPopup"
		  position="bottom"
		  :style="{ height: 'auto' }"
		>     
		
	        <div class="cellGroup borderBottom" @click='changeActiveInput(4)'>
	        	<span class="cellLabel">佣金</span>
	        	<span class="cellValue" style="align-self: center;">
	        		<span class="placehode" v-if="!money">￥0.00</span>
	        		<span class="input"><span v-if="money">￥</span>{{money}}</span>
	        		<span class="animation" v-if="activeInput==4"></span>
	        	</span>
	        </div>
        
			<div clas="keyboard">
	           <table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
	           	  <tr>
	           	  	<td class="w25">
	           	  		<div class="cc blod" @click="changePrice(1)">1</div>
	           	  	</td>
	           	  	<td class="w25">
	           	  		<div class="cc blod" @click="changePrice(2)">2</div>
	           	  	</td>
	           	  	<td class="w25">
	           	  		<div class="cc blod" @click="changePrice(3)">3</div>
	           	  	</td>
	           	  	<td rowspan="2">
	           	  		<div class="cc" @click="clearPrice">
	           	  			<img src="../../../../static/img/lanhu/39.png" alt="" style="width: 25px;height: 19px;"/>
	           	  		</div>
	           	  	</td>
	           	  </tr>
	           	  <tr>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(4)">4</div></td>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(5)">5</div></td>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(6)">6</div></td>
	           	  </tr>  
	           	  <tr>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(7)">7</div></td>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(8)">8</div></td>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(9)">9</div></td>
	           	  	<td rowspan="2" style="background: #fceb22;" @click="confirmPrice()">
	           	  		<div class="cc" style="font-size: 18px;font-weight: bold;">确定</div>
	           	  	</td>
	           	  </tr> 
	           	  <tr>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice('.')">.</div></td>
	           	  	<td class="w25"><div class="cc blod" @click="changePrice(0)">0</div></td>
	           	  	<td class="w25">
	           	  		<div class="cc blod" @click="cancle">
	           	  		    <img src="../../../../static/img/lanhu/40.png" alt=""  style="width: 16px;height: 9px;"/>
	           	  		</div>
	           	  	</td>           	  	
	           	  </tr>
	           </table>		
			</div>	
		</van-popup>
	</div>	
</template>

<script>
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	data() {
       return {
         activeInput:'4', // 用于绑定现在作用于哪个输入框
       	 money:'',       // 用于绑定佣金
       	 showMoneyPopup:false
       }
	},
	props:['comPrice'], 
	methods: {	
	  init(money){
	  	this.money=money
	  },
	  show(){
	  	this.showMoneyPopup=true
	  },
	  // 关闭弹框	
	  cancle(){
	  	 this.showMoneyPopup=false
	  },
      // 改变光标
      changeActiveInput(num){      	
      	this.activeInput=num      	
      	if(this.money){
      		this.money=Number(this.money).toFixed(2)
      	}       	
      },		
	  // 清除按钮点击事件
	  clearPrice(){
	  	let str=this.activeInput.toString()
		switch(str) {
		     case '4':		     
		        this.money=''
		        break;		        
		}
	  },
	  // 点击数字修改价格(数字)
	  changePrice(num){
        let str=this.activeInput.toString()
		switch(str) {
		     case '4':
		        if(num=='.'){
		          if(!this.money||this.money.indexOf('.')>=0){
		          	return false
		          }
		        }		     
		        this.money+=num
		        break;		        
		} 	  		  	
	  },
	  // 确认佣金
      confirmPrice(){ 
      	this.money=Number(this.money).toFixed(2)
      	if(this.comPrice=='0.00'){
      		this.$toast('请先设置价格');
      		return false
      	}
      	let max=Number(this.comPrice)/2
      	if(Number(this.money)>max){
      		this.$toast('佣金不能超过商品价格的50%');
      		return false      		
      	}          	
      	this.showMoneyPopup=false
	    this.$emit('confirmMoney',this.money)   
      }
      
	},
	mixins:[publicFun],//混入		
	mounted() {
	}
}	
</script>

<style scoped="">
*{box-sizing: border-box;}
.cc{display: flex;align-items: center;justify-content: center;}	
table{width: 100%;border:1px solid #ccc}
td{ border: 1px solid #f0f0f0;}
.w25{width: 25%;height: 60px;}
.blod{font-weight: bold;font-size: 18px;}
.animation{display: inline-block;vertical-align:-1px;
width:1px;height:13px;animation: blink 1s infinite steps(1, start)}  
@keyframes blink {
 0%{
   background-color: white;
 }
 50% {
   background-color: black;
 }
 100% {
   background-color: white;
 }
 }
.cellGroup{padding: 15px 10px;display: flex;height: 48px;}

.cellGroup>span{display: inline-block;}
.cellLabel{width: 60px;font-size: 14px;color: #333;}
.cellValue{flex: 1;font-size: 16px;position: relative;}
.placehode{position: absolute;left: 0;color: #999;font-size: 14px;top: 50%;margin-top: -8px;} 
.input{font-size: 14px;}
.tips{color: #ff8080;padding-top: 3px;}
.tips_icon{vertical-align: -3px;margin-left: 10px;font-size: 16px;}
.checkBox{width: 14px;height: 14px;vertical-align: middle;margin-right: 8px;}
</style>